import './styles/sync_screen.less';
import React, { useEffect, useState } from 'react';
import { useScreenSync } from '../Context/ScreenSyncContext';
import styled from '@emotion/styled';
import Tips from './Tips';
import Icon from '@/components/Icon';
import { useTranslation } from 'react-i18next';
import Cover from './Cover'

interface SyncScreenProps {
	width?: string;
	height?: string;
	headerVisiable: boolean;
}

type ScreenSyncState = 'idle' | 'start' | 'end' | 'connected';

type IStartCoBrowsing = 'request-customer-size' | undefined;
type ICmdId = number | string | undefined;

interface IScreenSize {
	width: number;
	height: number;
	scrollHeight: number;
}

const LargeScreenTips = styled.div`
	width: 100%;
	height: 100%;
	background-color: #000;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	line-height: 118px;
`;

const SyncScreen = (props: SyncScreenProps) => {
	const { t } = useTranslation();
	const [isShow, setIsShow] = useState(true);
	const { screenSyncState, setScreenSyncState, onScreenSyncEnd, zcoScreenSync } = useScreenSync();

	useEffect(() => {
		console.log('update:', screenSyncState().size);
	}, [screenSyncState().size]);

	useEffect(() => {
		console.log('pageLeave:', screenSyncState().pageLeave);
	}, [screenSyncState().pageLeave]);

	const largeScreenSync = (mode: 'small' | 'large') => {
		setScreenSyncState({ ...screenSyncState(), mode });
	};

	const onClose = () => {
		largeScreenSync('small');
		// onScreenSyncEnd();
	};

	const Scale = () => {
		largeScreenSync('small');
	};

	const getScreenSyncSize = () => {
		console.log(screenSyncState());
		const { width = 375, height = 667 } = screenSyncState().size;
		const layoutViewport = document.getElementById('widget-agent-container')!;
		const layoutHeight = layoutViewport.getBoundingClientRect().height;
		const realHeight = height > layoutHeight - 120 ? layoutHeight - 70 : height + 50;
		return { height: realHeight, width: width };
	};

	const getWidgetHeight = () => {
		const layoutViewport = document.getElementById('widget-agent-container')!;
		const layoutHeight = layoutViewport.getBoundingClientRect().height - 50;
		return Math.min(layoutHeight, 650);
	};

	const onInteract = (interact: boolean) => {
		if (interact) {
			zcoScreenSync.enableInteract();
		} else {
			zcoScreenSync.disableInteract();
		}
	}

	return (
		<>
			{/* {screenSyncState.mode === 'large' ? <LargeScreenTips>小窗中</LargeScreenTips> : null} */}
			<div
				className={`widget-sync-container-box ${screenSyncState().mode === 'small' ? 'small-sync-screen' : 'large-sync-screen'}`}
				id="widget-sync-screen-wrapper"
				style={
					screenSyncState().mode === 'large'
						? { display: 'block', width: getScreenSyncSize().width + 'px', height: getWidgetHeight() + 'px', top: '50px', right: '20px' }
						: { display: 'none' }
				}
			>
				{screenSyncState().mode === 'small' ? <Icon classname="icon-widget-bianzut large-scale" onClick={() => largeScreenSync('large')} /> : null}
				{screenSyncState().mode === 'large' ? <Tips text={t('screen-sync') as string} onClose={onClose} onScale={Scale} onInteract={onInteract}></Tips> : null}

				<div className="widget-sync-screen-container" id="widget-sync-screen-container"></div>
				{screenSyncState().pageLeave && <Cover />}
			</div>
		</>
	);
};

export default SyncScreen;
